<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>崔老师PHP课程</title>
    <style>
        h2{
            color: green;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h2>标题:崔老师PHP课程</h2>
    <p class="my-p">这里是段落1，这里是段落1，这里是段落1，这里是段落1。</p>
    <p id="my-p">
        这里是段落1，这里是段落1，这里是段落1，这里是段落1。
        <span class="my-span">SPAN</span>
        <span class="my-span2">SPAN</span>
        <a href="#">链接文字</a>
    </p>

    <a href="#">链接文字</a>

    <p style="text-align: center; background-color:gold;">
        <span style="text-decoration:underline;"> 文本内容 </span>
        <span style="text-decoration:line-through;"> 文本内容 </span>
        <span style="text-decoration:overline;"> 文本内容 </span>
    </p>
<br>
    <p style="text-align: center; background-color:gold;">
        <span style="font-family: '黑体';"> 文本内容 </span>
        <span style="font-family: '楷体';"> 文本内容 </span>
        <span style="font-family: '宋体';"> 文本内容 </span>
    </p>


    <table border="1" style="border-collapse:collapse;width:300px;">
        <tr>
            <td style="border: 1px solid red; text-align: center;">A</td>
            <td>B</td>
            <td>C</td>
        </tr>
        <tr>
            <td>E</td>
            <td>F</td>
            <td>G</td>
        </tr>
    </table>
    <div style="margin:5px 20px 20px 50px; border:3px solid red; padding: 30px; width: 150px; background-color:goldenrod;">文字内容</div>
    <div style="display:inline-block; border-width: 3px; border-style: dotted; border-color: green;  width: 150px; background-color:goldenrod;">文字内容1</div>
    <div style="display:none; border:3px double red; margin-top: 10px; width: 150px; background-color:goldenrod;">文字内容2</div>
    <div style="opacity: 0.5; position: fixed; top: 20px; left: 20px;
    border-bottom:3px double red; margin-top: 10px; width: 300px; background-color:goldenrod;">定位文字</div>
    <div style="padding:10px;height: 200px; max-width:500px; border-bottom:3px double red; margin-top: 10px;  background-color:goldenrod;">
        <div style="float: left; width: 50px; height: 50px;background-color: white;">左侧内容</div>
        <div style="float: right; width: 50px; height: 50px;background-color: white;">右侧内容</div>
        <div style="clear:both; width:100px; height: 100px;background-color: yellow;">右侧内容</div>
    </div>

    <div style="overflow: auto; opacity: 0.5;
        height: 100px; width:300px; border-bottom:3px double red; margin-top: 10px;  background-color:goldenrod;">
        文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
    </div>

    <div style="width: 100px; height:100px; margin: 0 auto;">
        <img src="icon.png" style="vertical-align: middle;"> <span style="vertical-align: middle;">图标</span>
    </div>

    <br><br><br><br><br><br>
</body>
</html>